/**
 * @author hsy541
 */


var cellFactorSelect = function(record) {
	cellFactorSampleTableStore.load( {
		params : {
			cellType : cellTypeComboBox.getValue()=='ALL'?'':cellTypeComboBox.getValue(),
			factor : factorComboBox.getValue()=='ALL'?'':factorComboBox.getValue()
		}
	});
}


// cell type combobox
var cellTypeComboBox = new Ext.form.ComboBox( {
	// loadingText: 'Loading all cell types',
	fieldLabel : 'Cell Type',
	name : 'cellType',
	labelSeparator : ':', // override labelSeparator layout config
	triggerAction : 'all',
	mode : 'remote',
	anchor: '40%',
	store : new Ext.data.ArrayStore( {
		// store configs
		autoDestroy : true,
		url : 'TableBrowser/fetchAllCellTypes',
		storeId : 'cellTypeStore',
		idIndex : 0,
		fields : ['index', 'cellType' ]

	}),
	valueField : 'cellType',
	displayField : 'cellType',
	listeners : {
		'select' : cellFactorSelect
	}
});



// factor combox
var factorComboBox = new Ext.form.ComboBox( {
	// loadingText: 'Loading all studies...',
	fieldLabel : 'Factor',
	name : 'factor',
	allowBlank : false,
	labelSeparator : ':', // override labelSeparator layout config
	triggerAction : 'all',
	mode : 'remote',
	anchor: '40%',
	store :  new Ext.data.ArrayStore( {
		// store configs
		autoDestroy : true,
		url : 'TableBrowser/fetchAllFactors',
		storeId : 'factorStore',
		idIndex : 0,
		fields : [ 'index','factor' ]
	}),
	valueField : 'factor',
	displayField : 'factor',
	listeners : {
		'select' : cellFactorSelect
	}
});


//json store of the grid panel
var cellFactorSampleTableStore = new Ext.data.JsonStore( {
	// store configs
	autoDestroy : true,
	url : 'TableBrowser/fetchSample',
	// reader configs
	root : 'samples',
	idProperty : 'id',
	fields : [ 'id', 'alias', 'description', 'instrumentModel', 'taxonid',
			'url', 'cellType', 'factor' ]
});

var cellFactorSampleCSM = new Ext.grid.CheckboxSelectionModel();
//sample table panel
var cellFactorSampleTable = new Ext.grid.GridPanel( {
	// fieldLabel: 'Sample',
	// labelSeparator: ':',
	loadingText : 'Loading all the samples',
	// width: 1300,
	anchor: '100%',
	height : 400,
	title : 'Sample Table',
	store : cellFactorSampleTableStore,

	// grid columns
	columns : [ cellFactorSampleCSM, {
		header : "SampleID",
		dataIndex : 'id',
		width : 100,
		sortable : true
	}, {
		header : "Sample Name",
		dataIndex : 'alias',
		width : 100,
		// hidden: true,
		sortable : true
	}, {
		header : "Instrument Model",
		dataIndex : 'instrumentModel',
		width : 200,
		align : 'left',
		sortable : true
	}, {
		// id: 'last',
		header : "Taxon ID",
		dataIndex : 'taxonid',
		width : 100,
		sortable : true
	}, {
		// id: 'last',
		header : "Cell Type",
		dataIndex : 'cellType',
		width : 100,
		sortable : true
	}, {
		// id: 'last',
		header : "Factor",
		dataIndex : 'factor',
		width : 100,
		sortable : true
	}, {
		header : "Description",
		dataIndex : 'description',
		width : 300,
		align : 'left'
	}, {
		header : "URL",
		dataIndex : 'url',
		width : 400,
		sortable : true
	} ],

	sm : cellFactorSampleCSM,

	// paging bar on the bottom
	bbar : new Ext.PagingToolbar( {
		pageSize : 25,
		// store: store,
		displayInfo : true,
		displayMsg : 'Displaying topics {0} - {1} of {2}',
		emptyMsg : "No topics to display",
		items : [ '-', {
			xtype : 'button',
			text : 'Select',
			listeners : {
				'click' : selectCellFactorSample
			}
		} ]
	})
});

function selectCellFactorSample(button, event) {
	rs = cellFactorSampleCSM.getSelections();
	for (i = 0; i < rs.length; i++) {
		var leafNode = {
			text : rs[i].get('id')+' '+rs[i].get('alias'),
			leaf : true,
			checked : false
		};
		if (!westTreePanel.getNodeById('selectedSampleTreeNode').findChild(
				'text', rs[i].get('id')+' '+rs[i].get('alias'))) {
			treeData[0].children.push(leafNode);
			westTreePanel.getRootNode().reload();
			westTreePanel.getNodeById('selectedSampleTreeNode').expand();
		}
	}
}

var cellFactorSampleTableView = new Ext.form.FormPanel( {
	title : 'By CellType & Factor',
	bodyStyle : 'padding:15px',
	items : [cellTypeComboBox, factorComboBox, cellFactorSampleTable ],
	// buttons: [{
	// text: 'Save'
	// }, {
	// text: 'Cancel'
	// }],
	layoutConfig : {
		labelSeparator : '~' // superseded by assignment below
	},
	// config options applicable to container when layout='form':
	hideLabels : false,
	labelAlign : 'left', // or 'right' or 'top'
	labelSeparator : ':  ', // takes precedence over layoutConfig value
	labelWidth : 65, // defaults to 100
	labelPad : 8
// defaults to 5, must specify labelWidth to be honored
		});